/** font*/
$font-8: 8PX;
$font-10: 10PX;
$font-11: 11PX;
$font-12: 12PX;
$font-13: 13PX;
$font-14: 14PX;
$font-15: 15PX;
$font-16: 16PX;
$font-17: 17PX;
$font-18: 18PX;
$font-20: 20PX;
$font-22: 22PX;
$font-24: 24PX;
$font-26: 26PX;
$font-28: 28PX;
$font-30: 30PX;
$font-35: 35PX;
$font-36: 36PX;
$font-38: 38PX;
$font-40: 40PX;

/* colors
-------------------------- */
$color-white: #fff !default;
$color-disable: #ADAEBC !default;
$color-grey : #666 !default;
$color-grey2 : #999 !default;
$color-dark-light : #AEAAAA !default;
$color-dark : #313131 !default;
$color-black: #000 !default;
$color-red: #FF1D10 !default;
$color-green: #07C160 !default;
$color-blue2: #07ACFA !default;
$color-blue: #23B1F9 !default;
$color-main: #FE5C22 !default;
$color-bg: #F8F7F7 !default;
$color-bg-grey: #F8F7F7 !default;

/* hover
------------------------- */
$hover-opacity: 0.7;
.base-hover {
  opacity: $hover-opacity;
}
.hover-bg {
  background-color: $color-bg-grey;
}

/* button-colors
-------------------------- */
$btn-active: #F26D83 !default;
$btn-disabled: #CCC !default;

$btn-disabled-1: mix(#fff, $btn-active, 70%) !default;
/* 53a8ff */

/* background-colors
-------------------------- */
$bg-color-base: #fff !default;
$bg-color-light : #F8F7F7 !default; //页面浅灰背景&图片浅灰背景
$bg-color-danger: #F9EFEF !default; //页面浅红背景&按钮边框
$bg-color-panel: #EC5D75 !default;

/* tag-colors
-------------------------- */
$tag-bg: #F4F4F4;
$tag-active: #FF5D24;

/* font-colors
-------------------------- */
$font-color-base: #000;
$font-color-dark: #313131;
$font-color-grey: #8A8989;
$font-color-light: #AEAAAA;

$line-color: #EEEEEE;

/* methods
-------------------------- */
// 字体、边框颜色
@mixin cb($color) {
  color: $color;
  border: 1PX solid $color;
}

// 背景图片地址和大小
@mixin bg($url) {
  background-image: url($url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

// 定位上下左右居中
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 定位上下居中
@mixin ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

// 定位左右居中
@mixin cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

// 宽高
@mixin wh($width, $height) {
  width: $width;
  height: $height;
}

// 字体大小，颜色
@mixin sc($size, $color) {
  font-size: $size;
  color: $color;
}

// flex 布局和 子元素 对其方式
@mixin fj($type: space-between) {
  display: flex;
  justify-content: $type;
}

@mixin main_btn($width: 90%){
  width: $width;
	height:  40PX;
	line-height: 40PX;
	background-color: $color-main;
	color: #ffffff;
  font-size: $font-15;
  border: none;
}

@mixin border_btn($width: 90%){
  width: $width;
  height: 40PX;
  line-height: 40PX;
  color: $color-main;
  border: none;
  border: 2px solid $color-main;
  background-color: $color-white;
	font-size: $font-15;
}